<template>
	<div class="box">
		<el-carousel indicator-position="outside">
			<el-carousel-item v-for="item in list" :key="item.id">
			<div class="item">
				<img :src="item.url">
			</div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>
<script lang="ts" setup>

const list = ref([
	{
		id:1,
		url:'/home/cau1.png'
	},
	{
		id:2,
		url:'/home/cau1.png'
	},
	{
		id:3,
		url:'/home/cau1.png'
	}
])
</script>
<style scoped lang="scss">
.box{
	margin: 60px 0;
	// border-radius:10px;
}

::v-deep .el-carousel__container{
	height: 200px;
}

.el-carousel__item .item {
  display: flex;
  margin: 0;
  line-height: 200px;
  color: #475669;
  border-radius:40px;
  opacity: 0.75;
}

.el-carousel__item {
  border-radius:20px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;

}

.item{
	width: 100%;
	height: 100%;

	>img{
		width: 100%;
		height: 100%;
		object-fit: fill;
	}
}
</style>
